<template>
  <div class="h-full grid grid-cols-[250px_1fr]">
    <div class="bg-Center">
      <SessionList />
    </div>
    <div :style="{ background: 'var(--bg-right)' }">
      <WindowTab obj="home"></WindowTab>
      <component :is="RenderMessagePage"></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, h, onActivated } from "vue";
import { ChatType } from "@/types/chat.ts";
import { storeToRefs } from "pinia";
import { useChat } from "@/store/modules/chat";
import { useSession } from "@/store/modules/session";
import ChatMessage from "./views/chat.vue";
import SessionList from "./views/session.vue";
import Empty from "@/components/Empty/index.vue";
import FriendRequest from "@/pages/Friend/views/RequestFriend.vue";

const chat = useChat();
const session = useSession();
const { ChatObject } = storeToRefs(chat);

const RenderMessagePage = computed(() => {
  if (!ChatObject.value) return h(Empty);
  switch (ChatObject.value.chatType) {
    case ChatType.friend:
    case ChatType.group:
      return ChatMessage;
    case ChatType.friendNotify:
      return FriendRequest;
    default:
      return Empty;
  }
});

onActivated(() => {
  session.GlobalUnreadMessage = 0;
});
</script>

<style lang="scss" scoped></style>
